{literal}
<script type="text/javascript">
$(document).ready(function(){
	$('#error_ward').html('');
});
</script>
{/literal}
<div>
	<span id='error_ward' style="color: red;"></span>
</div>
<div class="form_container" style="width: 600px;">
	<table>
		<tr>
			<td class="label">{translate}Province{/translate}</td>
			<td>			
				<select name='select_province2' id='select_province2' style="width: 180px;">
					<option id='empty' value='empty'>--{translate}Select province{/translate}--</option>
				</select>			
			</td>
			
			<td class="label">{translate}District{/translate}</td>
			<td>			
				<select name='select_district' id='select_district' style="width: 180px;">
					<option id='empty' value='empty'>--{translate}Select district{/translate}--</option>
				</select>			
			</td>						
		</tr>				
		
		<tr>
			<td class="label">{translate}Ward{/translate}</td>
			<td><input type="text" id="ward_name" style="width: 180px;"></td>
			<td class="label">{translate}Abbr{/translate}</td>
			<td><input type="text" id="abbr_code" style="width: 180px;"></td>		
		</tr>
		
		<tr>			
			<td class="btn" colspan="4" style="text-align: right;">				
				<a class='imgBtn' href="#">
					<img id='add_ward' title='{translate}Add new ward{/translate}' src="../images/add_small.png"/>
				</a>				
			</td>		
		</tr>
	</table>
</div>

<div style="margin-top: 5px; height: 190px; overflow: auto;">
	<table id='wardTable' cellspacing='0' cellpadding='0' class='grid'>				
		<thead>
			<tr>
				<th class="first" style="width: 30px; text-align: center;">{translate}Order number{/translate}</th>
				<th style="width: 200px; text-align: center;">{translate}Ward{/translate}</th>
				<th style="width: 60px; text-align: center;">{translate}Abbr{/translate}</th>
				<th class="last" colspan="2" style="width: 100px; text-align: center;">{translate}Act{/translate}</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>